Click away listener

用於檢測點擊事件是否發生在元素之外，它可以監聽文檔中某處發生的點擊事件。
和之前部分的組件有 onClose 的屬性一樣，他可以針對想要監聽的部分加入監聽事件。
例如，當用戶在點擊頁面除菜單外的任何一處，您可能想隱藏一個下拉的菜單：

<ClickAwayListener onClickAway={handleClickAway}>
  <div className={classes.root}>
    <button type="button" onClick={handleClick}>
      Open menu dropdown
    </button>
    {open ? (
      <div className={classes.dropdown}>
        Click me, I will stay visible until you click outside.
      </div>
    ) : null}
  </div>
</ClickAwayListener>

使用的邏輯和之前的 menu 是一樣的，這樣類似的應用其實在之前介紹過的組件中也有，詳細的內容可以至官方文件中查詢。

CSS Baseline

這個部分之前也有提及了，就是在做 normailize.css 所做的事情。

import React from 'react';
import CssBaseline from '@material-ui/core/CssBaseline';

export default function MyApp() {
  return (
    <React.Fragment>
      <CssBaseline />
      {/* 其他內容的組件 */}
    </React.Fragment>
  );
}

詳細設定的內容可以到文件中查看。

Modal

Modal 組件可以用來快速創建對話框、彈出窗口，燈箱等任何你所需的組件。
這邊建構的邏輯和之前的 Dialog, Menu, Drawer, Popover 是一樣的。

<button type="button" onClick={handleOpen}>
  Open Modal
</button>
<Modal
  open={open}
  onClose={handleClose}
  aria-labelledby="simple-modal-title"
  aria-describedby="simple-modal-description"
>
  {body}
</Modal>

這邊看到的效果和之前的 Dialog 是差不多的，詳細的內容可以到官方文件查看。

Popover

這個組件和之前介紹的 tooltips 是一樣的，他的文件中有各式 Anchor 屬性情況下的範例可以參考，連結在這，在這個章節也解釋了前面組件所用的屬性是如何作用的。

Popper

Popper 可用於在另一個內容之上顯示一些內容。它是 react-popper 的替代品。
和上述 Popover 的情況一樣也解釋了前面組件所用的屬性是如何作用的，其他使用上的細節可以至官方文件。

Portal

這個部分說明了 modal 和 Popper 是如何運作的，將其子組件呈現到當前 DOM 層次結構之外的新子節點中。

export default function SimplePortal() {
  const classes = useStyles();
  const [show, setShow] = React.useState(false);
  const container = React.useRef(null);

  const handleClick = () => {
    setShow(!show);
  };

  return (
    <div>
      <button type="button" onClick={handleClick}>
        {show ? 'Unmount children' : 'Mount children'}
      </button>
      <div className={classes.alert}>
        It looks like I will render here.
        {show ? (
          <Portal container={container.current}>
            <span>But I actually render here!</span>
          </Portal>
        ) : null}
      </div>
      <div ref={container} />
    </div>
  );
}

細節的話可以至官方文件中查詢。

Textarea Autosize

這個部分真的沒什麼需要特別講解的，跟原生的 Textarea tag 是一樣的，連結在此。

Transitions

這邊提供了一些過場動畫的用法，當然也可以透過 styles 去自己寫入啦，但這裡用起來的方式要便捷許多。
Material-UI 為某些過場組件 (Fade, Grow, Zoom, Slide) 的子級提供了 style 屬性。為了讓動畫如期實現，您必須將 style 屬性應用到DOM上。

// `props` 包含一個 `style` 屬性
// 需要將這個屬性提供給 `div` 元素
function MyComponent(props) {
  return (
    <div {...props}>
      Fade
    </div>
  );
}

export default Main() {
  return (
    <Fade>
      <MyComponent />
    </Fade>
  );
}

其他個別的效果可以至官方文件中查看，會比較清楚他們各自的效果。

useMediaQuery

這是 React 的 CSS 媒體查詢 （Media queries）hook。它監聽與 CSS 媒體查詢的匹配的內容。它允許根據查詢的結果是否匹配來渲染組件。

一般的查詢

你應該將媒體查詢提供給 hook 作為第一個參數。媒體查詢的字符串可以是任何有效的 CSS 媒體查詢，例如 '(prefers-color-scheme: dark)'。

export default function SimpleMediaQuery() {
  const matches = useMediaQuery('(min-width:600px)');

  return <span>{`(min-width:600px) matches: ${matches}`}</span>;
}

使用 Material-UI 的斷點輔助功能

function MyComponent() {
  const theme = useTheme();
  const matches = useMediaQuery(theme.breakpoints.up('sm'));

  return <span>{`theme.breakpoints.up('sm') matches: ${matches}`}</span>;
}

其他細部的應用可以到官方文件中查詢。

以上就是今天的全部內容了，明天會接續後面的內容做講解，我是不打算講解 LAB 的應用，因為本身 material ui 就是一個很龐大的 UI 庫，再加上 LAB 的安裝，專案會太過龐大，其中一些應用也不是很必需，除了 autoComplete 的部分是真的很方便之外，其他的存在真的是可有可無。

所以，明天要講的內容會是接續 Styles 的進階部分。